<template>
  <div class="login">
    <div class="container">
      <div class="left-section">
          <h1>New here?</h1>
          <h2>欢迎来到米阳光小区物业管理系统</h2>
          <div class="left-button">
            <button @click="leftButtonOneMethon">登录账号</button>
            <button @click="leftButtonTwoMethon">注册账号</button>
          </div>
      </div>
      <div class="right-section">
          <div class="login-form">
              <h2>忘记密码</h2>
              <div class="password-container">
                <input type="password" id="password"  @blur="validatePassword" v-model="forgetForm.password" placeholder="新密码">
                <span id="eye" @click="showPassword" class="eye-icon"><i class="el-icon-view"></i></span>
              </div>
              <div class="password-container">
                <input type="password" id="password1" @blur="validateAgainPassword" v-model="forgetForm.againPassword"  placeholder="确认密码">
                <span id="eye1" @click="showPassword1" class="eye-icon"><i class="el-icon-view"></i></span>
              </div>
              <input type="text" v-model="forgetForm.email" @blur="validateEmail" placeholder="邮箱">
              <div :class="{active: isShow, maile: true}">
                <input type="text" v-model="forgetForm.code" @blur="validateCode" placeholder="验证码">
                <button @click="getRandom">{{countdown}}</button>
              </div>
              <button @click="forgetMethon">修改</button>
              <div class="circles">
                  <div></div>
                  <div></div>
                  <div class="falge"></div>
              </div>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "../api";
export default {
  data(){
      return{
          isShow: false,
          forgetForm:{
            password: "",
            againPassword:"",
            email:"",
            code:"",
          },
          countdown: '发送',
          timer: null
        }
    },
    methods:{
      showPassword() {
        // 获取眼睛图标和密码输入框
        const eyeIcon = document.getElementById('eye');
        const passwordField = document.getElementById('password');
        const type = passwordField.type === 'password' ? 'text' : 'password';
            passwordField.type = type;
      },
      showPassword1() {
        // 获取眼睛图标和密码输入框
        const eyeIcon = document.getElementById('eye1');
        const passwordField = document.getElementById('password1');
        const type = passwordField.type === 'password' ? 'text' : 'password';
            passwordField.type = type;
      },  
      getRandom(){
         if(this.forgetForm.email !== ''){
            api.getRandom(this.forgetForm).then(res =>{
              if(res.type === 'error'){
                this.$message.error(res.message)
              }else if(res.data.code === 200){
                this.$message({
                  message: '发送成功',
                  type: 'success'
                });
              }else{
                this.$message.error(res.data.message)
              }
            })
            this.countdown = 60; // 初始倒计时时间，可根据需求修改
            this.timer = setInterval(() => {
              if (this.countdown > 0) {
                this.countdown--;
              } else {
                clearInterval(this.timer);
                this.timer = null;
                this.countdown = '重新发送'
              }
            }, 1000); // 每秒更新一次倒计时
         }else{
            this.$message.error("请输入邮箱")
         }
      },
      forgetMethon(){
          if(this.isFormValid){
            api.forget(this.forgetForm).then(res =>{
              if(res.type === 'error'){
                this.$message.error(res.message)
              }else if(res.data.code === 200){
                this.$message({
                  message: '修改成功',
                  type: 'success'
                });
                this.$router.push("/login")
              }else{
                this.$message.error(res.data.message)
              }
            })
          }
      },
      leftButtonOneMethon(){
        this.$router.push("/login")
      },
      leftButtonTwoMethon(){
        this.$router.push("/register")
      },
      //校验
      validatePassword(){
        const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
        if(this.forgetForm.password === ''){
            this.$notify.error({
              title: '错误',
              message: '请输入密码'
            });
            return false;
        }else if(!regex.test(this.forgetForm.password)){
          this.$notify.error({
              title: '错误',
              message: '密码太简单，请确保包含大小写字母、数字和特殊字符，长度至少为 8 位'
            });
            return false;
        }
        return true;
      },
      validateEmail(){
        const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
        if(this.forgetForm.email === ''){
            this.$notify.error({
              title: '错误',
              message: '请输入邮箱'
            });
            return false;
        }else if(!regex.test(this.forgetForm.email)){
            this.$notify.error({
              title: '错误',
              message: '邮箱地址无效，请输入有效的邮箱地址'
            });
            return false;
        }
        return true;
      },
      validateAgainPassword(){
        if(this.forgetForm.againPassword === ''){
            this.$notify.error({
              title: '错误',
              message: '请输入确认密码'
            });
            return false;
        }else if(this.forgetForm.againPassword != this.forgetForm.password){
          this.$notify.error({
              title: '错误',
              message: '两次密码输入不一致'
            });
            return false;
        }
        return true;
      },
      validateCode(){
        if(this.forgetForm.code === ''){
          this.$notify.error({
              title: '错误',
              message: '请输入验证码'
            });
            return false;
        }
        return true;
      }
    },
    computed: {
      isFormValid() {
        return (this.validatePassword() && this.validateAgainPassword()
        && this.validateEmail() && this.validateCode());
      },
      inputType() {
        return this.showPassword? 'text' : 'password';
      }
    },
    beforeDestroy() {
      if (this.timer) {
        clearInterval(this.timer);
      }
    }
}
</script>

<style scoped lang="less">
.login {
  font-family: Arial, sans-serif;
  display: flex;
  height: 100vh;
  background: #f0f2f5;
}

.login .container {
  display: flex;
  width: 100%;
}

.login .left-section {
  background: linear-gradient(135deg, #4a90e2, #5bc8e7);
  width: 50%;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  border-radius: 0 0 100% 0;
}

.login .left-section h2 {
  font-size: 2em;
  margin-bottom: 10px;
}

.login .left-section h3 {
  font-size: 1em;
  margin-bottom: 20px;
  text-align: center;
}
.login .left-section button {
  padding: 10px 20px;
  font-size: 1em;
  color: #4a90e2;
  background: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-right: 10px;
}

.login .left-section button:hover {
  background: #e6f2ff;
}

.login .right-section {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.login .login-form {
  width: 43%;
  background: white;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
}
.login .login-form .maile{
  position: relative;
  width: 100%;
  margin-bottom: 50px;
}
.login .login-form .maile input{
  position: absolute;
  width: 65%;
  left: 0px;
}
.login .login-form .maile button{
  position: absolute;
  width: 25%;
  right: 5px;
  cursor: pointer;
}

.login .login-form h2 {
  margin-bottom: 20px;
}

.login .login-form input {
  width: 95%;
  padding: 10px;
  margin: 10px 0;  
  border: 1px solid #ccc;
  border-radius: 20px;
  background-color: rgb(240, 240, 240);
}

.login .login-form .password-container {
  position: relative;
}
.login .login-form .eye-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.login .login-form button {
  width: 100%;
  padding: 10px;
  margin-top: 10px  ;
  background: #4a90e2;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em;
}

.login .login-form button:hover {
  background: #357abd;
}

.login .login-form .circles {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.login .login-form .circles div {
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background: #ccc;
  border-radius: 50%;
}

.login .login-form .circles div.falge {
  background: #4a90e2;  
}
.login .active{
  display: none;
}
</style>